<template>
	<span class="demonstration">请选择一个时间</span>
	<el-date-picker v-model="dateValue" type="date" placeholder="请选择一个日期" @change="change" :shortcuts="shortcuts"
		:size="large" value-format="YYYY-MM-DD" />

	<el-table :data="tableData" border stripe show-overflow-tooltip highlight-current-row style="width: 100%"
		:row-style="{ height: '20px' }" :cell-style="{ padding: '0px' }"
		:default-sort="{ prop: 'lbc', order: 'descending' }">
		<el-table-column type="index" fixed></el-table-column>
		<el-table-column prop="c" label="code" fixed></el-table-column>
		<el-table-column prop="n" label="名称" fixed></el-table-column>
		<el-table-column prop="zdp" label="涨跌幅" sortable
			:formatter="(row, column) => changeRatio(row[column.property])"></el-table-column>
		<el-table-column prop="p" label="最新价" sortable
			:formatter="(row, column) => { return row[column.property] / 1000 }"></el-table-column>

		<el-table-column prop="amount" label="成交额" sortable
			:formatter="(row, column) => changeMoney(row[column.property])" />

		<el-table-column prop="ltsz" label="流通市值" sortable :formatter="(row, column) => changeMoney(row[column.property])"
			:sort-method="(a, b) => sort(a.ltsz, b.ltsz)" />

		<el-table-column prop="hs" label="换手率" sortable
			:formatter="(row, column) => changeRatio(row[column.property])"></el-table-column>
		<el-table-column prop="fund" label="封板资金" sortable
			:formatter="(row, column) => changeMoney(row[column.property])"></el-table-column>
		<el-table-column prop="fbt" label="首次封板" sortable></el-table-column>
		<el-table-column prop="lbt" label="最后封板" sortable></el-table-column>
		<el-table-column prop="zbc" label="炸板次数" sortable></el-table-column>
		<el-table-column prop="zttj" label="涨停统计" sortable>
			<template #default="scope">
				<span> {{ scope.row.zttj.ct }} / {{ scope.row.zttj.days }}</span>
			</template>
		</el-table-column>
		<el-table-column prop="lbc" label="连板数" sortable></el-table-column>
		<el-table-column prop="hybk" label="所属行业"></el-table-column>

	</el-table>
</template>

<script >

export default {
	// 涨停板行情
	// https://quote.eastmoney.com/ztb/detail#type=ztgc
	data() {
		return {
			dateValue: "",
			tableData: [],
			shortcuts: [
				{
					text: '今天',
					value: new Date(),
				},
				{
					text: '昨天',
					value: () => {
						const date = new Date()
						date.setTime(date.getTime() - 3600 * 1000 * 24)
						return date
					},
				},
				{
					text: '一周前',
					value: () => {
						const date = new Date()
						date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
						return date
					},
				},
			]
		}
	},
	mounted() {
		this.data('').then(data => this.tableData = data.data.pool);
	},
	methods: {
		change(value) {
			this.data(value).then(data => this.tableData = data.data.pool);
		},
		filterTag(value, row) {
			return row.TRADEMARKET === value;
		},
		sort(r1, r2) {
			//https://blog.csdn.net/shids_/article/details/129046419
			return parseFloat(r1) - parseFloat(r2);
		},
		data(dateValue) {
			// https://dayjs.gitee.io/docs/zh-CN/get-set/day
			var dateDay = dayjs();
			if (dateValue != '') {
				dateDay = dayjs(dateValue);
			}

			dateValue = dateDay.format('YYYYMMDD')

			//console.log(" data ", dateValue);

			const options = {
				method: 'GET',
				url: 'https://push2ex.eastmoney.com/getTopicZTPool',
				params: {
					ut: '7eea3edcaed734bea9cbfc24409ed989',
					dpt: 'wz.ztzt',
					Pageindex: '0',
					pagesize: '100',
					sort: 'lbc:desc',
					date: dateValue,
					_: '1702384529824'
				}
			};

			return new Promise((resolve, reject) => {
				axios.request(options).then(function (response) {
					console.log(response.data);
					return resolve(response.data);
				}).catch(function (error) {
					console.error(error);
				});
			});


		},
		changeRatio(num) {
			return Number(num).toFixed(2) + "%";
		},
		changeMoney(num) {
			return changeMoney(num);
		}

	}
}

</script>